<template>
	<view class="out-box">
		<!-- 分类栏加取消退出 -->
		<view class="classify">
			<!-- 选择账单类型 -->
			<view class="type">
				<!-- 收入 -->
				<view class="expense" @click="changeType(0)">
					收入
					<!-- 装饰杠 -->
					<view class="bar" :class="state.accountType==1?'barTran':''"></view>
				</view>
				<!-- 支出 -->
				<view class="pay" @click="changeType(1)">
					支出
				</view>
			</view>
			<!-- 取消增加账单，返回首页 -->
			<view class="back" @click="back">
				取消
			</view>
		</view>
		<!-- 支出收入类型 -->
		<view class="typeac">
			<!-- 收入 -->
			<view class="typeac-bigItem" v-for="(item,index) in state.expenseArr" :key="item" v-if="state.accountType==0">
				<view class="typeac-title">
					{{index}}
				</view>
				<view class="smallItem">
					<view class="itemBox" @click="selectType(types)" v-for="types in item" :key="types" >
						<view :class="state.selectName==types[0]?'exBg':''" class="itemIcon">
							<image :src="types[1]"></image>
						</view>
						<view class="">
							{{types[0]}}
						</view>
					</view>
				</view>
			</view>
			<!-- 支出 -->
			<view class="typeac-bigItem" v-for="(item,index) in state.payArr" v-if="state.accountType==1">
				<view class="typeac-title">
					{{index}}
				</view>
				<view class="smallItem">
					<view class="itemBox" @click="selectType(types)" v-for="types in item" :key="types" >
						<view :class="state.selectName==types[0]?'payBg':''" class="itemIcon">
							<image :src="types[1]"></image>
						</view>
						<view class="">
							{{types[0]}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 键盘输入数额 -->
		<view class="money">
			<!-- 备注及金额 -->
			<Compute :data="state.type" :info="state.Info" :changeType="state.changeType"></Compute>
		</view>
	</view>
</template>

<script setup>
import Compute from '../../components/compute/compute.vue'
import {onLoad} from '@dcloudio/uni-app';
import { reactive } from "vue";
const state = reactive({
	accountType:0,
	selectName:'',
	expenseArr:{
		'日用百货':[
			['家庭','../../static/type/family.svg']
		],
		'休闲娱乐':[
			['彩票','../../static/type/lottery.svg'],
			['红包','../../static/type/redPacket.svg']
		],
		'金融':[
			['工资','../../static/type/salary.svg'],
			['理财','../../static/type/moneyManagement.svg'],
			['年终奖','../../static/type/yearEndBonus.svg'],
			['借入','../../static/type/borrow.svg'],
			['收款','../../static/type/receipt.svg'],
			['转账','../../static/type/transferAccounts.svg']
		],
		'个人':[
			['礼金','../../static/type/cashGift.svg'],
			['礼品','../../static/type/present.svg']
		],
		'其他类':[
			['其他','../../static/type/else.svg']
		]
	},
	payArr:{
		'餐饮副食':[
			['餐饮','../../static/type/repast.svg'],
			['副食','../../static/type/non-stapleFood.svg'],
			['饮品','../../static/type/beverage.svg'],
			['蔬菜','../../static/type/vegetable.svg'],
			['水果','../../static/type/fruits.svg'],
			['零食','../../static/type/snacks.svg'],
			['烟酒','../../static/type/tobaccoAndWine.svg'],
			['食堂消费','../../static/type/CanteenConsumption.svg'],
			['餐厅消费','../../static/type/restaurantConsumption.svg']
		],
		'日用百货':[
			['日用','../../static/type/ofEverydayUse.svg'],
			['百货','../../static/type/departmentStore.svg'],
			['服饰','../../static/type/costume.svg'],
			['通讯','../../static/type/communication.svg'],
			['家庭','../../static/type/family.svg'],
			['洗漱用品','../../static/type/toiletry.svg'],
			['维修','../../static/type/communication.svg'],
			['快递费','../../static/type/expressFee.svg']
		],
		'休闲娱乐':[
			['休闲','../../static/type/leisure.svg'],
			['娱乐','../../static/type/recreation.svg'],
			['彩票','../../static/type/lottery.svg'],
			['社交','../../static/type/socialContact.svg'],
			['旅行','../../static/type/travel.svg'],
			['追星','../../static/type/starchaser.svg'],
			['红包','../../static/type/redPacket.svg'],
			['美容','../../static/type/Beauty.svg']
		],
		'金融':[
			['租金','../../static/type/rental.svg'],
			['理财','../../static/type/moneyManagement.svg'],
			['借出','../../static/type/lend.svg'],
			['还款','../../static/type/repayment.svg'],
			['转账','../../static/type/transferAccounts.svg']
		],
		'个人':[
			['书籍','../../static/type/books.svg'],
			['医疗','../../static/type/medical.svg'],
			['学习','../../static/type/study.svg'],
			['礼金','../../static/type/cashGift.svg'],
			['礼品','../../static/type/present.svg'],
			['宠物','../../static/type/pet.svg'],
			['汽车','../../static/type/automobile.svg'],
			['工作','../../static/type/work.svg'],
			['数码','../../static/type/numericalCode.svg'],
			['交通','../../static/type/traffic.svg']
		],
		'其他类':[
			['住房','../../static/type/housing.svg'],
			['捐赠','../../static/type/donate.svg'],
			['其他','../../static/type/else.svg']
		]
	},
	type:[],
	Info:{},
	changeType:''
})
// 生命周期
onLoad((obj)=>{
	if(obj.type == '修改'){
		let newObj = JSON.parse(obj.info)
		state.Info = newObj
		state.accountType = newObj.billType
		let changeType1 = obj.type;
		state.changeType = changeType1
		state.selectName = newObj.type
		state.type = [newObj.type,newObj.billType]
	}else if(obj.type == '扫描'){
		let newObj = JSON.parse(obj.info)
		state.Info = newObj
		state.accountType = newObj.billType
		let changeType1 = obj.type;
		state.changeType = changeType1
		state.selectName = newObj.type
		state.type = [newObj.type,newObj.billType]
	}else if(obj.type == '增加'){
		state.changeType = '增加'
	}
	// console.log(state.type)
	// changeType(0)
})
// 改变账单类型
const changeType = (id) =>{
	state.accountType = id
}
// 返回首页
const back = ()=>{
	uni.switchTab({
		url:'/pages/index/index'
	})
}
// 选择账单类型
const selectType = (id) =>{
	// console.log(id)
	state.selectName = id[0]
	let arr = [id[0]];
	arr.push(state.accountType)
	state.type = arr;
}
</script>

<style lang="less" scoped>
.out-box{
	overflow: hidden;
	padding-top: var(--status-bar-height);
	box-sizing: border-box;
	width: 100vw;
	height: 100vh;
	background-color: #d9ecff;
	.classify{
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		.type{
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-column-gap: 60rpx;
			.expense{
				width: 100rpx;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				.bar{
					transition: all 0.3s;
					position: absolute;
					width: 100%;
					height: 4rpx;
					background-color: aquamarine;
					left: 0;
					border-radius: 4rpx;
					bottom: -40rpx;
				}
				.barTran{
					transition: all 0.3s;
					transform: translateX(160rpx);
				}
			}
			.pay{
				width: 100rpx;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		.back{
			height: 120rpx;
			line-height: 120rpx;
			position: absolute;
			right: 40rpx;
			top: 0rpx;
		}
	}
	.typeac{
		width: 100%;
		height: 700rpx;
		background-color: #ffffff;
		overflow: hidden;
		overflow-y: scroll;
		padding: 30rpx 20rpx 20rpx 20rpx;
		box-sizing: border-box;
		.typeac-bigItem{
			margin-bottom: 60rpx;
			color: #999;
			.typeac-title{
				margin-bottom: 20rpx;
			}
			.smallItem{
				display: grid;
				grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
				.itemBox{
					color: black;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					height: 160rpx;
					.itemIcon{
						width: 80rpx;
						height: 80rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						image{
							width: 60rpx;
							height: 60rpx;
						}
					}
				}
				.exBg{
					background-color: aqua;
					border-radius: 50%;
				}
				.payBg{
					background-color: aquamarine;
					border-radius: 50%;
				}
			}
		}
	}
	.money{
		width: 100%;
		height: calc(100% - 820rpx);
		background-color: #ffffff;
		box-shadow: 0 0 10rpx 6rpx #e9e9e9;
		padding: 20rpx 20rpx 10rpx 20rpx;
		box-sizing: border-box;
	}
}
</style>
